<template>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <div class="bluetiao"></div>
        <span>个人资料</span>
      </div>
    </template>

  <el-form :inline="true" :model="user" class="demo-form-inline">
    <el-form-item label="医生编号" prop="id">
      <el-input  placeholder="请输入" v-model="user.id" ref="inputId"/>
    </el-form-item>
    <el-form-item label="用户名" prop="phone">
      <el-input  placeholder="请输入手机号" v-model="user.phone"/>
    </el-form-item>
    <el-form-item label="医生头像">
      <img :src="imageUrl" alt="" style="width: 50px;">
    </el-form-item><br>
    <el-form-item label="医生姓名">
      <el-input  placeholder="请输入" v-model="user.username"/>
    </el-form-item>
    <el-form-item label="医生角色">
      <el-select  placeholder="请输入" v-model="user.job">
        <el-option label="全科医师" value="1"/>
        <el-option label="系统管理员" value="2"/>
        <el-option label="全科护士" value="3"/>
        <el-option label="护理医师" value="4"/>
      </el-select>
    </el-form-item>
    <el-form-item label="性别">
      <el-select  placeholder="请选择" v-model="user.sex">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </el-form-item><br>
    <el-form-item label="医生简介">
        <el-input type="textarea" v-model="user.introduction" style="width:400px;"></el-input>
    </el-form-item><br>
    <el-form-item label="医生擅长">
        <el-input type="textarea" v-model="user.tags" style="width:400px;"></el-input>
    </el-form-item><br>

    <el-form-item>
      <el-button :plain="true" @click="handleSave(user)">保存</el-button>
      <!-- <el-button type="primary" @click="handleSave(user)">保存</el-button> -->
    </el-form-item>
  </el-form>


  </el-card>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
import { userMessage,updateUser } from '../../api/user'
export default{
  data() {
    return {
      user:{
        id:'',
        username:'',
        sex:'',
        phone:'',
        avatarUrl:'',
        job : '',
        tags:'',
        introduction:''
      },
      imageUrl:'',
      
    }
  },
  async created(){
    const res = await userMessage()
    // this.id = res.id
    // this.username = res.username
    // this.sex = res.sex
    // this.phone = res.phone
    // console.log(res)
    this.user.id = res.list[1].id
    this.user.phone = res.list[0].phone
    this.user.username = res.list[1].username
    this.user.sex = res.list[0].sex
    this.user.job = res.list[0].job.name
    this.user.tags = res.list[0].tags
    this.user.introduction = res.list[0].introduction
    this.imageUrl = res.list[0].avatarUrl
  },

  
  methods: {
    async handleSave(user){
      const result = await updateUser(user)
      ElMessage({
        message: '保存成功！',
        type: 'success',
      })
      console.log(result)
    },
  },
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 1000px;
  height: 600px;
  position: relative;
}
.bluetiao{
    border-width: 0px;
    position: absolute;
    left: 10px;
    top: 19px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

</style>
